SnackBar

要實作在使用者完成特定作業後，應用程式需要顯示對應的訊息來通知使用者的需求，可以透過 MatSnackBarModule 模組內的 MatSnackBar 服務。此服務的 open() 方法可以傳入訊息、動作名稱與其他參數，

private readonly snackBar = inject(MatSnackBar);

protected onSave(): void {
  this.snackBar.open('已儲存', '關閉', { duration: 3000 });
  this.dialogRef.close(this.form.value);
}

參數方面我們可以指定訊息關閉時間 (duration )、訊息顯示水平位置 (horizontalPosition)、垂直位置 (verticalPosition) 以及要傳入的資料 (data) 等資訊。同樣地，我們也可以定義 MatSnackBarConfig 變數，並抽換 MAT_SNACK_BAR_DEFAULT_OPTIONS令牌，來設定整個應用程式的訊息顯示參數。

export const snackBarConfig: MatSnackBarConfig = {
  duration: 3000,
  horizontalPosition: 'right',
  verticalPosition: 'top',
};

除了利用 open() 方法外，也可以利用 openFromComponent 或 openFromTemplate 方法來開啟自訂義的元件。

Progress bar and spinner

引用 MatProgressSpinnerModule 或 MatProgressBarModule 模組後，就可以實作在相關作業後的 Loading 顯示，前者是以圓型呈現，而後者則是線型。

<mat-progress-spinner [mode]="mode" [value]="value"></mat-progress-spinner>

其中我們可以透過 mode 來設定是以確定值 (determinate) 或不確定值 (indeterminate) 顯示，

今日範例

• Stackblitz

接下來

有時候我們會希望使用者依序輸入資料，明天來使用 Stepper 元件來實作這樣的需求。